<template>
  <l-layout v-if="ready" class="l-tab-page">
    <l-panel style="padding: 0">
      <template #toolLeft>
        <div class="l-panel--item">
          <l-select
            v-model="field"
            size="mini"
            :options="columnOptions"
          ></l-select>
        </div>
        <div class="l-panel--item" style="width: 320px">
          <el-input
            :placeholder="$t('please enterquery关键字')"
            @keyup.enter.native="hanleSearch"
            v-model="keyword"
            size="mini"
          >
            <el-button
              :loading="tableLoading"
              @click="hanleSearch"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
      </template>
      <div class="l-rblock">
        <l-table
          ref="mainTable"
          :columns="columns"
          :dataSource="tableData"
          :loading="tableLoading"
          :isPage="true"
          :pageTotal="tableTotal"
          :tablePage.sync="tableCurrentPage"
          @loadPageData="turnTablePage"
        >
        </l-table>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
const api = window.$api.data.dbsource;
export default {
  props: {
    code: String,
  },
  data() {
    return {
      field: "",
      keyword: "",

      tableData: [],
      tableLoading: false,
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,

      columns: [],

      ready: false,
    };
  },
  created() {},
  mounted() {},
  computed: {
    columnOptions() {
      const res = [];
      this.columns.forEach((t) => {
        res.push({ label: this.getColNames(t), value: t.prop });
      });
      return res;
    },
  },
  methods: {
    async init() {
      this.ready = false;
      await this.loadTableData();
      this.ready = true;
    },
    getColNames({ prop, label }) {
      let name = prop;
      if (prop != label) {
        name = `${prop}(${label})`;
      }
      return name;
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let whereSql = "";
      if (this.keyword && this.field) {
        var col = this.columns.find((t) => t.prop == this.field);
        if (col.csType.toLowerCase() == "string") {
          whereSql = `${this.field} like '%${this.keyword}%'`;
        } else {
          whereSql = `${this.field} = ${this.keyword}`;
        }
      }

      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        whereSql: whereSql,
      };

      const res = await this.$awaitWraper(
        api.getDataPage(this.code, queryData)
      );
      if (res) {
        this.columns = res.cols;
        this.tableData = res.rows;
        this.tableTotal = res.records;
      } else {
        this.columns = [];
        this.tableData = [];
        this.tableTotal = [];
      }

      this.tableLoading = false;
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    hanleSearch() {
      this.loadTableData();
    },
    resetForm() {
      this.keyword = "";
      this.field = "";
      this.tableData = [];
    },
  },
};
</script>